<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  /*第二个问题可以通过ch 单位来缓解。这个ch 单位是由CSS 值与单位
（第三版）（http://w3.org/TR/css3-values）规范引入的一个新单位，表示“0”
字形的宽度。它应该是最不为人知的一个新单位，因为在绝大多数场景下，
我们并不关心0 这个字符显示出来到底有多宽。但对等宽字体来说，这是个
例外。在等宽字体中，“0”字形的宽度和其他所有字形的宽度是一样的。因
此，如果我们用ch 单位来表达这个标题的宽度，那取值实际上就是字符的
数量：在这个例子中就是15。*/
  
  @keyframes typing {
    from {
      width: 0
    }
  }
  
  @keyframes caret {
    50% {
      border-right-color: transparent;
    }
  }
  
  h1 {
    font: bold 200% Consolas, Monaco, monospace;
    /*width: 8.25em;*/
    width: 15ch;
    white-space: nowrap;
    overflow: hidden;
    border-right: .05em solid;
    animation: typing 8s steps(15), caret 1s steps(1) infinite;
  }
</style>

<body>
  <h1>CSS is awesome!</h1>
  <script>
    // $$('h1').forEach(function (h1) {
    //   var len = h1.textContent.length, s = h1.style;
    //   s.width = len + 'ch';
    //   s.animationTimingFunction = "steps(" + len + "),steps(1)";
    // });
  </script>
</body>

</html>